<template>
  <div>
    <page-dialog
      v-show="turnOverInfo.visible"
      :title="turnOverInfo.title"
      v-model:visible="turnOverInfo.visible"
      :width="turnOverInfo.width"
      :bt-loading="turnOverInfo.btLoading"
      :bt-list="turnOverInfo.btList"
      @reset="reset"
    >
      <page-form
        class="paddingBox order-model-formBox flex_wrap_start_start"
        v-model:ref-obj="turnOverInfo.formInfo.ref"
        :data="turnOverInfo.formInfo.data"
        :field-list="turnOverInfo.formInfo.fieldList"
        :rules="turnOverInfo.formInfo.rules"
        :label-width="turnOverInfo.formInfo.labelWidth"
      >
        <template v-slot:form-userName>
          <el-input
            type="input"
            :disabled="true"
            class="not-mongolia"
            placeholder="请选择维修人员"
            v-model="turnOverInfo.formInfo.data.userName"
          >
            <template #append>
              <el-icon @click="openRepairUserWindow"><MoreFilled /></el-icon>
            </template>
          </el-input>
        </template>
      </page-form>
    </page-dialog>
    <!-- 维修人员 -->
    <SelectRepairUser
      v-if="selectRepairUserInfo.visible"
      v-model:showDialog="selectRepairUserInfo.visible"
      :check-box="false"
      :saveEmpty="true"
      :highlight-row="true"
      :query="selectRepairUserInfo.query"
      @callback="selectRepairUserCallBack"
    />
  </div>
</template>
<script setup name="turnOver">
import PageDialog from "@/components/PageDialog/index";
import PageForm from "@/components/PageForm/index";
import SelectRepairUser from "@/components/SelectRepairUser/index";
import { transferDeviceMaintenanceTask } from "@/api/repair.js";

const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps(["visible", "row"]);

//选择维修人员
const selectRepairUserInfo = reactive({
  visible: false,
  saveEmpty: true,
  query: {
    userIdNotIn: "",
  },
});
//转交相关
const turnOverInfo = reactive({
  visible: false,
  title: "转交",
  btLoading: false,
  type: "",
  msg: "",
  width: "40%",
  flag: true,
  btList: [
    {
      label: "关闭",
      event: handleCloseTurnOver,
      show: true,
    },
    {
      label: "保存",
      type: "primary",
      event: saveTurnOver,
      show: true,
    },
  ],

  formInfo: {
    ref: null,
    data: {},
    fieldList: [
      {
        label: "转交给",
        value: "userName",
        type: "slot",
        required: true,
      },
    ],
    rules: {
      acceptUserName: [
        {
          required: true,
          message: "请选择维修人员",
          trigger: "change",
        },
      ],
    },
    labelWidth: "120px",
  },
});

const showDialog = computed({
  get() {
    return props.visible;
  },
  set(newValue) {
    emit("update:visible", newValue); // 更新父组件visible
  },
});

watch(
  () => props.visible,
  (newVal) => {
    turnOverInfo.visible = newVal;
    selectRepairUserInfo.visible = false;
  },
  {
    immediate: true,
  }
);

watch(
  () => props.row,
  (newVal) => {
    turnOverInfo.formInfo.data.id = newVal.id;
    selectRepairUserInfo.query.userIdNotIn = newVal.maintenancePrincipal;
  },
  {
    immediate: true,
  }
);

function reset() {
  emit("callbackTurnOver", false);
}
//转交保存
function saveTurnOver() {
  turnOverInfo.formInfo.ref.validate((valid) => {
    if (valid) {
      console.log(
        turnOverInfo.formInfo.data,
        "turnOverInfo.formInfo.data"
      );
      transferDeviceMaintenanceTask(turnOverInfo.formInfo.data).then(
        (resp) => {
          if (resp && resp.success) {
            emit("callbackTurnOver", false);
          }
          // turnOverInfo.visible = false;
        }
      );
    }
  });
}
function handleCloseTurnOver() {
  turnOverInfo.visible = false;
  emit("callbackTurnOver", false);
}
function openRepairUserWindow() {
  selectRepairUserInfo.visible = true;
}
function selectRepairUserCallBack(row) {
  if (row) {
    turnOverInfo.formInfo.data['userId'] = row.userId
    turnOverInfo.formInfo.data['userName'] = row.name
  } else {
    turnOverInfo.formInfo.data['userId'] = ''
    turnOverInfo.formInfo.data['userName'] = ''
  }
}
</script>
